<template>
  <h1>Home Component</h1>
  <router-link to="/foo">Foo</router-link> |
  <router-link to="/event/3?page=1">Event3</router-link> |
  <router-link to="/base-form">BaseForm</router-link> |
  <div>
    <router-link to="/event-list">异步请求1</router-link> |
    <router-link to="/event-list2">异步请求2</router-link> |
    <router-link to="/event-list3">异步请求3</router-link> |
  </div>
  <div>
    测试Error Route |
    <router-link to="/event/1">1</router-link> | <router-link to="/event/error">error</router-link> |
  </div>
  <div><router-link to="/cleartimer">ClearTimer</router-link></div>
  <div><router-link to="/basevmodel">basevmodel</router-link></div>
  <div><router-link to="/keepaliveexample">keepaliveexample</router-link></div>


<!--  <EventList></EventList>-->
<!--  <p>异步请求2</p>-->
<!--  <Suspense>-->
<!--    <EventList2></EventList2>-->
<!--  </Suspense>-->
</template>

<script>
import EventList from "./EventList.vue";
import EventList2 from "./EventList2.vue";
export default {
  name: "Home",
  components: {EventList, EventList2},
  beforeRouteLeave(routeTo, routeFrom, next) {
    const answer = window.confirm(
        'Do you really want to leave? You have unsaved changes!'
    )
    if (answer) {
      next() // Confirm Navigation
    } else {
      next(false) // Cancel Navigation
    }
  }
}
</script>

<style scoped>

</style>
